Support scrolling when modal is tall #5
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Firefox quirk I think, but the backdrop covers the scrollbar and prevents scrolling. It also no longer appears to be clickable (doesn't close the modal when clicked). |
Owner
Author
|
Thanks! I just pushed an update that seems to work better, let me know how it works for you if you take a look 👍 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This was pretty damn hard to figure out but Netlify had a good (albeit also awful but that's not their fault, it's the web's) solution.
Basically the challenge is how do you make a modal perfectly centered when there's room, but have the modal area scroll if the modal is too tall?
The solution ends up being using
inline-blockfor the modal itself and putting it next to an extra element that's alsoinline-blockand has a height of100vhbutwidth: 0, and making them bothvertical-align: middle. You don't need flexbox to do the centering at all using this approach but the whole thing definitely feels terrifying.Check out the deploy preview and test it out and let me know if I missed anything!